<template>
    <div>
        <!-- <headers></headers> -->
        <div
            style="width: 100%;height: 450px;background-image: url('https://img.alicdn.com/imgextra/i1/O1CN01MVmZkz1uheOKGferS_!!6000000006069-1-tps-3840-740.gif');background-size: 120% 450px;">
            <el-row>
                <el-col :span="10">
                    <img src="https://znunwm.top/stu/assets/img/banner/b-shape1.png" style="width: 100%;height: 440px;">
                    <div style="position: absolute;top: 180px;left: 180px;">
                        <div class="title">赞助商</div>
                        <div class="zi">首页->赞助商合作伙伴</div>
                    </div>

                </el-col>
            </el-row>
        </div>
        <div class="conn">
            <div class="title">
                赞助商
            </div>
            <div class="zi" style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 35px;">
                这里是赞助商所运营的，您可以选择性使用对您有帮助的产品</div>


            <el-row :gutter="25">
                <el-col :span="6" v-for="item in list" :key="item.url">
                    <el-card shadow="hover" style="border-radius: 10px;height: 300px;">
                        <div style="display: flex;align-items: flex-start;justify-content: center;padding-top: 20px;">
                            <img :src="item.prc" style="width: 220px;height:140px;margin: auto;">
                        </div>
                        <div style="text-align: center;font-size: 18px;margin-bottom: 10px;" class="zi">{{ item.name }}
                        </div>

                        <div style="display: flex;align-items: center;margin-top: 35px;" v-if="item.url !== ''">
                            <div @click="open(item.url)" style="cursor: pointer;">立即前往</div>
                            <i class="el-icon-arrow-right"></i>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
        <div id="targter" style="margin-top: 200px;"></div>
        <footers></footers>
    </div>
</template>

<script>
import headers from '../components/nav.vue';
import footers from '../components/footers.vue';
export default {
    data() {
        return {
            list: [
                {
                    prc: 'https://img-blog.csdnimg.cn/20201023124020914.gif#pic_center',
                    url: 'https://www.aliyun.com/',
                    name: '阿里云',
                    introduce: '融合了相册，账单，动态，文章 于一体的微信小程序',
                },
                {
                    prc: 'https://img-blog.csdnimg.cn/2020081700034562.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xIX1NNRA==,size_16,color_FFFFFF,t_70#pic_center',
                    url: 'https://cloud.tencent.com/',
                    name: '腾讯云',
                    introduce: '发布文章、图片等内容的博客网站',
                },
                {
                    prc: 'https://img0.baidu.com/it/u=945850818,3846636614&fm=253&fmt=auto&app=138&f=PNG?w=1109&h=500',
                    url: 'https://cloud.baidu.com/doc/API/index.html',
                    name: '百度api',
                    introduce: '发布文章、图片等内容的博客网站',
                },
                {
                    prc: 'https://img2.baidu.com/it/u=1473906184,1647791245&fm=253&fmt=auto&app=120&f=JPEG?w=1204&h=678',
                    url: 'https://lbs.amap.com/',
                    name: '高德地图',
                    introduce: '发布文章、图片等内容的博客网站',
                },

            ],
        }
    },
    components: {
    headers ,
    footers
  },
    methods: {
        open(lient) {
            window.open(lient, '_blank');
        },
        view() {
            this.$router.push('zhandian')
        },
        handleClose(done) {
            done();
        }
    }
}
</script>

<style>
.conn {
    margin-left: 120px;
    margin-right: 120px;
}

.zi {
    margin-top: 20px;
    font-family: "Montserrat", sans-serif;
    color: #231d70;
    letter-spacing: 2px;
    text-transform: uppercase;
    animation: move linear 2000ms infinite;
}

.title {
    margin-top: 60px;
    font-weight: 700;
    font-family: "Montserrat", sans-serif;
    color: #231d70;
    font-size: 40px;
    letter-spacing: 5px;
    width: 87%;
    text-transform: uppercase;
    animation: move linear 2000ms infinite;
}
</style>